<template>
  <el-form-item :class="{ 'mb-18px': mode === 'view' && isContainer(item) }" :prop="item.formProp" :rules="[{
    required: item.required, message: `${item.label}不能为空`, trigger: 'change'
  }]" :label="formatLabel(item)" :label-width="item.labelHidden ? 0 : formConfig.labelWidth">
    <Input v-if="item.type === 'input'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <Textarea v-if="item.type === 'textarea'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <Password v-if="item.type === 'password'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <InputNumber v-if="item.type === 'number'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <Radio v-if="item.type === 'radio'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <Checkbox v-if="item.type === 'checkbox'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <Rate v-if="item.type === 'rate'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <Select v-if="item.type === 'select'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <Switch v-if="item.type === 'switch'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <TimeSelect v-if="item.type === 'time-select'" v-model="value" :item="item" :mode="mode" v-bind="$attrs"
      v-on="$attrs" />
    <DatePicker v-if="item.type === 'date-picker'" v-model="value" :item="item" :mode="mode" v-bind="$attrs"
      v-on="$attrs" />
    <TimePicker v-if="item.type === 'time-picker'" v-model="value" :item="item" :mode="mode" v-bind="$attrs"
      v-on="$attrs" />
    <Text v-if="item.type === 'text'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
    <ArrayContainer v-if="item.type === 'arrayContainer'" v-model="value" :item="item" :mode="mode" v-bind="$attrs"
      v-on="$attrs" />
    <LayoutContainer v-if="item.type === 'layoutContainer'" v-model="value" :item="item" :mode="mode" v-bind="$attrs"
      v-on="$attrs" />
    <Upload v-if="item.type === 'upload'" v-model="value" :item="item" :mode="mode" v-bind="$attrs" v-on="$attrs" />
  </el-form-item>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { IFormItem, IFormConfig } from '../type'
import { getAliasValue, setAliasValue, isContainer } from '../hook'
import Input from './fat-form-create-item-input.vue'
import Textarea from './fat-form-create-item-textarea.vue'
import Password from './fat-form-create-item-password.vue'
import InputNumber from './fat-form-create-item-number.vue'
import Radio from './fat-form-create-item-radio.vue'
import Checkbox from './fat-form-create-item-checkbox.vue'
import Rate from './fat-form-create-item-rate.vue'
import Select from './fat-form-create-item-select.vue'
import Switch from './fat-form-create-item-switch.vue'
import TimeSelect from './fat-form-create-item-time-select.vue'
import DatePicker from './fat-form-create-item-date-picker.vue'
import TimePicker from './fat-form-create-item-time-picker.vue'
import Text from './fat-form-create-item-text.vue'
import ArrayContainer from "./fat-form-create-item-arrayContainer.vue";
import LayoutContainer from './fat-form-create-item-layoutContainer.vue'
import Upload from './fat-form-create-item-upload.vue'

const props = defineProps<{
  item: IFormItem;
  mode?: "edit" | "view"
}>()

const formConfig = inject<IFormConfig>("formConfig")!
const formParams = inject<any>("formParams")
const value = computed({
  get(): IFormItem {
    if (props.mode == "edit") {
      return props.item.defaultValue
    } else {
      const path = props.item.formProp?.split('.') ?? []
      return getAliasValue(path, formParams)
    }
  }, set(value: any) {
    if (props.mode === 'edit') {
      props.item.defaultValue = value
    } else {
      const path = props.item.formProp?.split('.') ?? []
      setAliasValue(value, path, formParams)
    }
  }
})

// tip 宽度 :style="{ gridColumn: `span ${item.span}` }"
function formatLabel(item: IFormItem) {
  if (item.labelHidden) return ''
  if (props.mode === 'edit') {
    return item.label
  }
  if (typeof item.rowIndex === 'number') {
    return item.label.replace(/#n/g, String(item.rowIndex + 1))
  }
  return item.label
}

onMounted(() => {
  console.log(props.item.type, props.item.label, value.value);

})
</script>

<style scoped lang="scss">.m-none {
  margin-bottom: 0 !important;
}</style>
